<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>头部</title>
</head>

<body>
    <div id="head">
        <ul class="center" id="nav">
            <li>
                <a href="/home" id="title">小白图书</a>
            </li>
            <li>
                <horizontal-nav :menu="mainMenu" @send-show-index="setShowIndex"></horizontal-nav>
            </li>
            <li>
                <div class="ui search searchInput">
                    <div class="ui icon input">
                        <input class="prompt" type="text" placeholder="搜索新鲜事..." id="searchInput" v-model="searchContent">
                        <i class="search icon"></i>
                    </div>
                    <!-- 搜索的窗口 -->
                    <div class="searchWindow center">
                        <!-- 历史记录 -->
                        <div>
                            <span class="searchType">历史搜索</span>
                            <ul v-if="searchHistory">
                                <li v-for="(item, index) in searchHistory" @click="setSearchContent(item.content)">
                                    <div class="center">
                                        <span>{{item.content.substring(0, 16)}}<span v-if="item.length > 16">...</span></span>
                                        
                                        <i class="close icon" @click.stop="deleteSearchHistory(index)"></i>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- 热门推荐 -->
                        <div>
                            <span class="searchType">推荐搜索</span>
                            <ul v-if="searchRecommend">
                                <li v-for="(item, index) in searchRecommend" @click="setSearchContent(item)">
                                    <div class="center">
                                        <span>{{item.substring(0, 16)}}<span v-if="item.length > 16">...</span></span>
                                        
                                        <i class="close icon" @click.stop="deleteSearchRecommend(index)"></i>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <ul class="center" id="right">
                    <li>
                        <!-- 个人头像 -->
                        <div class="center">
                            <div v-if="user" class="headImage" :style='{"background-image":"url("+user.headImage+")"}'>
                                <span v-if="user">{{user.name}}</span>
                                <span v-else>游客</span>
                            </div>
                            <div class="right floated meta" id="down">
                                <i class="caret down icon"></i>
                            </div>
                            <!-- 账户管理信息 -->
                            <div id="account">
                                <left-nav :controller = '0' :menu="accountMenu"></left-nav>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="/product">
                            <button class="ui basic button">
                                <i class="edit icon"></i>
                                创作
                            </button>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div th:include="common :: #common"></div>
    <script src="/js/head.js"></script>
    <link rel="stylesheet" href="/css/head.css">
</body>

</html>